/* @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono|IBM+Plex+Sans:700|IBM+Plex+Serif:700|Vidaloka&display=swap');
 Fix user-agent */
@import url('https://fonts.googleapis.com/css2?family=BioRhyme:wght@400;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
* {
  box-sizing: border-box;
}

html {
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  scrollbar-width: thin;
}

html, input {
  font-family:
          "IBM Plex Mono",
          "HelveticaNeue-Light",
          "Helvetica Neue Light",
          "Helvetica Neue",
          Helvetica,
          Arial,
          "Lucida Grande",
          sans-serif;
}

html, body {
  font-family:
          "Sofia Sans",
          "IBM Plex Mono",
          "HelveticaNeue-Light",
          "Helvetica Neue Light",
          "Helvetica Neue",
          Helvetica,
          Arial,
          "Lucida Grande",
          sans-serif;
  height: 100%;
  /*  margin: 0;
    padding: 0; */
  background-color: black;
  color: #fff;
}

.bg-dark {background-color: #17212B!important;}
nav.navbar {max-height: 56px;}
a.navbar-brand {font-family: 'BioRhyme', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"!important; font-weight: 800;}
a {color: rgb(23, 162, 184);}
.nav-profile-img {
  width: 34px;
  border: 1px solid #fff;
  background-color: #ccc;
}

.pages ul {
  list-style: none;
  word-wrap: break-word;
}

div.messages {background-color: #101012; font-size: 0.95em; line-height: 1.4em;
  font-family:
          "IBM Plex Mono",
          "HelveticaNeue-Light",
          "Helvetica Neue Light",
          "Helvetica Neue",
          Helvetica,
          Arial,
          "Lucida Grande",
          sans-serif;}

.messages hr {border: 1px solid #444;}
/* Pages */

.pages {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;

}

.page {
  height: 100%;
  position: absolute;
  width: 100%;
}

/* Login Page */

.login.page {
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(6px); /* Not yet Firefox by default */
}

.login.page .form {
  height: 100px;
  margin-top: -100px;
  position: absolute;

  text-align: center;
  top: 50%;
  width: 100%;
}

.login.page .form .usernameInput {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid #fff;
  outline: none;
  padding-bottom: 15px;
  text-align: center;
  width: 400px;
}

.login.page .title {
  font-size: 200%;
}

.login.page .usernameInput {
  font-size: 200%;
  letter-spacing: 3px;
}

.login.page .title, .login.page .usernameInput {
  color: #fff;
  font-weight: 100;
}

/* Chat page */

.chat.page {
  display: none;
}

/* Font */

.messages {
  font-size: 0.98em; line-height: 1.4em;
  color: #cccccc;
}

.inputMessage {
  font-size: 0.98em; line-height: 1.4em;
  padding-left: 0!important;
}

div.log {
  color: #cccccc;


  text-align: left;
  /* font-size: 0.95em; line-height: 1.4em; */
}


/* Aux Messages */

.AuxchatArea {
  height: 300px;
  padding-bottom: 0;
}

.Auxmessages {
  height: 100%;
  margin: 0;
  overflow-y: scroll;
  padding: 10px;
}
div.Auxmessages {background-color: #101012; font-size: 0.95em; line-height: 1.2em; color: #ccc;
  font-family:
          "IBM Plex Mono",
          "HelveticaNeue-Light",
          "Helvetica Neue Light",
          "Helvetica Neue",
          Helvetica,
          Arial,
          "Lucida Grande",
          sans-serif;}

/* Messages */

.chatArea {
  height: 100%;
  padding-bottom: 60px;
}

.messages {
  height: 100%;
  margin: 0;
  overflow-y: scroll;
  padding: 10px;
  scrollbar-width: thin;
  /* scrollbar-color: #fff #333; */
}

.progress {
  height: 50%;
  margin: 0;
  overflow-y: scroll;
  padding: 10px;
  scrollbar-width: thin;
  background-color: #0d1718;
}

.message.typing .messageBody {
  color: #fff4d8;
}

.username {
  /* font-weight: 700; */
  overflow: hidden;
  /* padding-right: 15px; */
  text-align: right;
}

/* Input */

.inputPrompt {

  border: none;
  border-top: 1px solid #000000;
  bottom: 0;
  height: 60px;
  left: 0;
  outline: none;
  margin-left: 0;
  padding: 17px 0 8px 0;
  position: absolute;
  right: 0;

  color: #ccc;
  background-color: #101012;

}

/* @group Blink */

.blink {
  position: absolute;
  left: 5px;
  -webkit-animation: blink .5s linear infinite;
  -moz-animation: blink .5s linear infinite;
  -ms-animation: blink .5s linear infinite;
  -o-animation: blink .5s linear infinite;
  animation: blink .5s linear infinite;
}

@keyframes blink {
  0% { opacity: 0; }
  40% { opacity: 60; }
  60% { opacity: 100; }
  80% { opacity: 60; }
  100% { opacity: 0; }
}

/* @end */

.inputMessage {
  background-color: #101012;
  border: none;
  border-top: 1px solid #000000;
  bottom: 0;
  height: 60px;
  left: 0;
  outline: none;
  margin-left: 20px;
  padding-left: 10px;
  position: absolute;
  right: 0;
  width: calc(100% - 30px);
}



.room {
  border-bottom: 1px solid #444; border-top: 1px solid #444; width:auto; margin: 1em 0 1em 0; padding: 1em 0 1em 0;
}
.room_title, .ttwhite {color: #fff; font-style:normal; }
.room_id, .debug {color: #555; font-style:normal; font-weight: normal;}
.district {
  color: #CCC;
}
.exits {
  color: #CCC;
}

.room .district {
  color: #CCC;

}
.room .exits {
  color: #CCC;
}
.roomdesc {
  color: #CCC; padding: 5px; padding-left: 0;
}
.room_event {color: #999; font-style:italic;}
.c_a_soft {color: #ccc;}
.ttgreen {color: #00bb00;}
/* .ttamber, .alert {color: #b8bf29;} */
.c_object {color: #e3d9b6;}
.ttblue {color: #00bbbb;}
.magical_effect, .ttbblue {color: #59ffff; font-style: italic;}
/*.error, .ttred {color: #d63023;} */

/*.room_event {color: #999; font-style:italic;} */
.game_announce {color: #f0bfff; font-style:italic;}
.debug {color: #555;}
.console_reply {color: #9F3;}
.console_actual {color: #fff;}
.c_time {color: #f0bfff; font-style:italic;}
.c_user {color: #fffe78;}
/*.c_object {color: #e3d9b6;} */
/* .c_a_soft {color: #ccc;} */
.console_problem {color: #d63023;}
/* .magical_effect {color: #1c94c4;} */

/*
*  NEW TERMINAL COLOURS
*/

.termGreen {color: #00BB00;} /* Helpful info and conformations */
.termGreenInv {padding: 0.008em 0; color: #000; background: #00bb00;}
.termGreenBright {color: #00ff00;} /* Helpful info and conformations */
.termGreenInvBright {padding: 0.008em 0; color: #000; background: #00FF00;}

.termAmber, .ttamber, .alert {color: #dc8900;} /* Warnings and alerts */
.termAmberInv {padding: 0.008em 0; color: #000; background: #dc8900;}
.termAmberBright {color: #ff9f00;} /* Helpful info and conformations */
.termAmberInvBright {padding: 0.008em 0; color: #000; background: #ff9f00;}

.error, .ttred, .termRed {color: #ec1700;} /* Warnings and alerts */
.termRedInv {padding: 0.008em 0; color: #000; background: #ec1700;}
.termRedBright {color: #FF0000;} /* Helpful info and conformations */
.termRedInvBright {padding: 0.008em 0; color: #000; background: #FF0000;}

.slideout-panel {
  position: absolute;
  top: 56px;
  left: -100vw;
  width: 100vw;
  height: calc(100vh - 56px);
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px); /* Not yet Firefox by default */

  z-index: 49;
  color: #000;
}
.slideout-panel-main {

}


.slideout-menu h3 {
  position: relative;
  color: #fff;
}

/* circle graph stuff */

.single-chart {
  width: 100%;
  justify-content: space-around ;
}

.circular-chart {
  display: block;
  margin: 10px auto;
  /*max-width: 80%; */
  /*  max-height: 250px; */
}

.circle-bg {
  fill: none;
  stroke: #101012;
  stroke-width: 3.8;
}

.circle {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0, 100;
  }
}

.circular-chart.orange .circle {
  stroke: #ff9f00;
}

.circular-chart.green .circle {
  stroke: #4CC790;
}

.circular-chart.blue .circle {
  stroke: #3c9ee5;
}

.percentage {
  fill: #ccc;
  font-family: sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
}

.shadow {
  -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
  filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
  /* Similar syntax to box-shadow */
}

#map {transform: rotateX(70deg) rotateY(0deg) rotateZ(5deg);
  transform-style: preserve-3d;}
.topmapsq {position: relative; width: 100%;}
.topmapsq:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.topmapsq-content {
  position: absolute;
  width: 100%;
  height: 100%;
  /*background-color: #222;*/
  /*color: #4b4b4b;*/
  /*box-shadow: inset 0 0 10px rgba(0,0,0,0.4);*/
  transition: all 0.3s ease;

}
.mapsq {position: relative; width: 100%; }
.mapsq:after {
  content: "";
  display: block;
  padding-bottom: 100%;
  /*margin: 10px 10px 10px 10px!important;*/
}
.mapsq-content {

  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #222;
  color: #4b4b4b;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.4);
  transition: all 0.3s ease;

}
.mapsq-position { position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  user-select: none;}

#controls {}
.sq {position: relative; width: 100%; border: 1px #000 solid;}
.sq:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.sq-content {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #222;
  color: #4b4b4b;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.4);
  transition: all 0.3s ease;
}
.sq-position { position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  user-select: none;}

.buttonGo
{background-color: #343a40; cursor: pointer; color: #fff; border: none; box-shadow: none;}
.buttonGo:hover {background-color: #4d5359;box-shadow: none;}
.buttonGo:active {background-color: #222;
  color: #4b4b4b;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.4);
  transition: none
}